<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 导航栏 -->
        <el-form
          :inline='true'
          ref="ruleform"
        >
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item
                  label="学科名称"
                  prop='subjectName'
                >
                  <el-input v-model="keyword"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="grid-content bg-purple-light">
                <el-form-item>
                  <el-button
                    size="small"
                    @click="delInput"
                  >清除</el-button>

                  <el-button
                    size="small"
                    type="primary"
                    @click="searchInput"
                  >搜索</el-button>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <!-- <div class="pager"> -->
                <el-button
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  style="margin-right"
                  @click="addSubject"
                >新增学科</el-button>
                <!-- </div> -->
              </div>
            </el-col>
          </el-row>

        </el-form>
        <!-- 警告栏 -->
        <el-alert
          :closable="false"
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
        >
        </el-alert>
        <!-- 表格 -->
        <el-table :data='list'>
          <el-table-column
            type="index"
            :index="indexMethod"
            width="50"
            label="序号"
          >
          </el-table-column>
          <!--   -->
          <el-table-column
            prop="subjectName"
            width="120"
            label="学科名称"
          >
            <!--   -->
          </el-table-column>
          <el-table-column
            prop="username"
            width="130"
            label="创建者"
          >
          </el-table-column>
          <!--  -->
          <el-table-column
            prop="addDate"
            width="160"
            label="创建日期"
          >
            <template #default="{ row }">
              {{ fromatTime(row.addDate) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="isFrontDisplay"
            width="120"
            label="前台是否显示"
          >
            <template #default="{ row }">
              {{ row.isFrontDisplay === 1 ? '是' : '否'}}
            </template>
          </el-table-column>
          <!--  -->
          <el-table-column
            prop="twoLevelDirectory"
            width="120"
            label="二级目录"
          >
          </el-table-column>
          <!--  -->
          <el-table-column
            prop="tags"
            width="120"
            label="标签"
          >
          </el-table-column>
          <!-- -->
          <el-table-column
            prop="totals"
            width="120"
            label="题目数量"
          >
          </el-table-column>
          <!-- fixed="right" -->
          <el-table-column
            label="操作"
            width="240"
          >
            <!-- 可以跳转 @click="$router.push(`/subjects/directorys`)" -->
            <template #default='{row}'>
              <el-button
                type="text"
                size="medium"
                @click="$router.push({path:'/subjects/directorys',query:{
               id:row.id,name:row.subjectName
                }})"
              >学科分类</el-button>
              <el-button
                type="text"
                size="medium"
                @click="$router.push({path:'/subjects/tags',query:{
               id:row.id,name:row.subjectName
                }})"
              >学科标签</el-button>
              <el-button
                type="text"
                size="medium"
                @click="editsubject(row)"
              >修改</el-button>
              <el-button
                type="text"
                size="medium"
                @click="delsubject(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div
          class="pager"
          style=""
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10,20, 50]"
            :page-size="pagesize"
            layout=" prev, pager, next, sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <SubjectsAdd
        :show-dialog.sync="showDialog"
        ref="editForm"
      />
    </div>

  </div>

</template>

<script>
import SubjectsAdd from '../components/subjects-add.vue'
import { subjectListAPI, subjectRemoveAPI, subjectDetailAPI } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  name: 'Subjects',
  data() {
    return {
      page: 1,
      pagesize: 10,
      counts: 19,
      showDialog: false,
      // id: '',
      subjectName: '',
      list: [], // 表示当前页的数据（从接口处取回）
      newlist: [],
      keyword: '', // 搜索关键词
      form: {}
    }
  },
  components: {
    SubjectsAdd
  },

  created() {
    setTimeout(() => {
      this.subjectList()
      this.searchInput()
    })
  },
  methods: {
    /**
     * 点击搜索
     */
    searchInput() {
      this.page = 1
      this.subjectList(this.keyword)
    },
    /**
     *获取学科列表
     */
    async subjectList(val) {
      // console.log(val)
      const { data } = await subjectListAPI({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.keyword
      })
      // 前端过滤方法
      // this.list = data.items.filter(item => item.subjectName.includes(val))
      // console.log(tmp)
      this.list = data.items
      this.counts = data.counts
      return data
    },
    /**
     * 每页多少条数据
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      // this.pagesize = val
      // this.page = 1
      // this.subjectList()
    },
    /**
     * 一共几页数据
     */
    handleCurrentChange(val) {
      this.page = val
      this.subjectList()
    },
    // 序号
    indexMethod(index) {
      return (this.page - 1) * this.pagesize + index + 1
    },

    /**
     * 点击清除清空输入框
     */
    delInput() {
      this.keyword = ''
    },

    /**
     *点击添加显示弹框
     */
    addSubject() {
      this.showDialog = true
      this.$refs.editForm.showTitle = '添加名称'
    },
    /**
     * 点击修改
     */
    async editsubject(row) {
      this.showDialog = true
      this.$refs.editForm.showTitle = '修改名称'
      const { data } = await subjectDetailAPI(row)
      data.isFrontDisplay += ''
      this.$refs.editForm.form = data
      this.subjectList()
    },
    /**
     * 点击删除
     */
    delsubject(id) {
      this.$confirm('确定要删除该部门吗？此操作不可逆', '提示')
        .then(async () => {
          // 点击了确定时执行
          await subjectRemoveAPI({ id })
          this.$message.success('恭喜！删除成功')
          this.subjectList()
        })
        .catch(() => {
          // 点击取消时 执行，不配置的话 会报错
        })
    },
    // 格式化日期
    fromatTime(value) {
      return dayjs(value).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>
.pager {
  display: flex;
  justify-content: flex-end;
  /* display: inline-block; */
}
/* /deep/ .addsubjects {
  width: 45% !important;
} */
</style>
